<template>
    <div class="logo-card" @mouseenter="isShowModal = true" @mouseleave="isShowModal = false">
        <el-card class="logo-box" shadow="hover">
            <div class="logo">
                <img v-if="props.logo.logo" :src="baseURL + props.logo.logo" alt="">
                <span>{{ props.logo.logo_name }}</span>
            </div>
            <div class="text">{{ props.logo.name }}</div>
        </el-card>
        <Transition>
            <!-- 鼠标移入显示modal层 -->
            <div class="modal" v-if="isShowModal && isClick">
                <el-button :icon="Edit" circle @click="isDialog = true" />
                <el-button type="primary" :icon="Check" circle @click="handleSet" />
                <el-button type="danger" :icon="Delete" circle @click="handleDelete" />
            </div>
        </Transition>
    </div>
    <el-dialog v-model="isDialog" title="编辑LOGO" width="500px">
        <el-form :model="newSetting">
            <el-form-item label="网站图标" label-width="70px">
                <el-upload class="avatar-uploader" :action="baseURL + '/goods/upload'" :headers="headers"
                    :show-file-list="false" :on-success="handleLogoSuccess" :before-upload="beforeLogoUpload">
                    <img v-if="newSetting.logo" :src="baseURL + newSetting.logo" class="avatar">
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>
            <el-form-item label="网站名称" label-width="70px">
                <el-input v-model="newSetting.logo_name" autocomplete="off" :input-style="{ width: '178px' }" show-word-limit
                    maxlength="10"></el-input>
            </el-form-item>

            <el-form-item label="设置名称" label-width="70px">
                <el-input v-model="newSetting.name" autocomplete="off" :input-style="{ width: '178px' }" show-word-limit
                    maxlength="15"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="isDialog = false">取 消</el-button>
            <el-button type="primary" @click="submit">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { baseURL } from '@/config/baseURL'
import { Edit, Check, Delete } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { editSetting, delSetting, updateSetting } from '@/api/api/setting'
import { useSettingStore } from '@/stores/useSetting'

const props = defineProps(['logo', 'isClick'])
const emits = defineEmits(['getList'])
const settingStore = useSettingStore()

//modal层
const isShowModal = ref(false)
//弹窗
const isDialog = ref(false)

const newSetting = reactive({
    id: '',
    logo: '',
    logo_name: '',
    name: ''
})

onMounted(() => {
    if (props.logo) {
        newSetting.id = props.logo.id
        newSetting.logo = props.logo.logo
        newSetting.logo_name = props.logo.logo_name
        newSetting.name = props.logo.name
    }
})

//提交
const submit = () => {
    if (newSetting.logo === '') {
        ElMessage.warning('请上传LOGO')
        return
    }
    if (newSetting.logo_name === '') {
        ElMessage.warning('请填写网站名称')
        return
    }
    if (newSetting.name === '') {
        ElMessage.warning('请填写设置名称')
        return
    }
    editSetting({ ...newSetting }).then(res => {
        if (res.data.code === 200) {
            ElMessage.success('保存成功')
            isDialog.value = false
            emits('getList')
        } else {
            ElMessage.error(res.data.message)
        }
    })
}

//删除logo
const handleDelete = () => {
    ElMessageBox.confirm('确定删除该LOGO吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        delSetting({ id: props.logo.id }).then(res => {
            if (res.data.code === 200) {
                ElMessage.success(res.data.message)
                emits('getList')
            } else {
                ElMessage.error(res.data.message)
            }
        })
    }).catch(() => {

    })
}

//上传成功回调
const handleLogoSuccess = (response, uploadFile) => {
    newSetting.logo = response.url
    ElMessage.success('上传成功')
}

//上传之前
const beforeLogoUpload = (rawFile) => {
    if (rawFile.size / 1024 / 1024 > 5) {
        ElMessage.error('图片大小不能超过5M')
        return false
    }
    return true
}

//设为网站Logo
const handleSet = () => {
    ElMessageBox.confirm('确定将该Logo设为网站Logo吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        updateSetting({ id: props.logo.id }).then(res => {
            if (res.data.code === 200) {
                ElMessage.success(res.data.message)
                settingStore.getSetting()
            } else {
                ElMessage.error(res.data.message)
            }
        })
    }).catch(() => {

    })
}

</script>

<style scoped lang='less'>
.logo-card {
    // 宽高为子元素的内容
    width: content-width;
    height: content-width;
    min-width: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    flex-shrink: 0;
    position: relative;
    border-radius: 5px;
    cursor: pointer;

    .logo-box {
        width: 100%;

        .logo {
            display: flex;
            align-items: center;
            user-select: none;
            padding: 10px 0;

            img {
                height: 45px;
            }

            span {
                font-size: 20px;
                margin-left: 10px;
                color: #383838;
                letter-spacing: 3px;
            }
        }

        .text {
            font-size: 14px;
            color: #999;
            text-align: center;
            margin-top: 15px;
        }
    }

    .modal {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: inherit;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1000;
        display: flex;
        justify-content: center;
        align-items: center;
    }


}

.v-enter-active,
.v-leave-active {
    transition: opacity 0.3s ease;
}

.v-enter-from,
.v-leave-to {
    opacity: 0;
}
</style>